<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
            <script language="javascript">
            var ctuapp_share_img="www.baidu.com";
            function scanClick() {
                window.webkit.messageHandlers.ScanAction.postMessage(null);
            }
                
            function shareClick() {
                
                
                window.webkit.messageHandlers.signFunction.postMessage({"request":{"recordId":"5b6cf0937e2e3501419476bd","persons":[{"id":"5b696b937e2e35014194759d","sno":"000003","name":"RealName003","isok":true},{"id":"5b696b937e2e35014194759e","sno":"004004","name":"RealName004","isok":true},{"id":"5b696b937e2e35014194759f","sno":"005005","name":"RealName005","isok":false},{"id":"5b696b937e2e3501419475a1","sno":"007007","name":"RealName007","isok":false},{"id":"5b696b937e2e3501419475a2","sno":"008008","name":"RealName008","isok":false},{"id":"5b696b937e2e3501419475a3","sno":"009009","name":"RealName009","isok":false},{"id":"5b696b937e2e3501419475a5","sno":"011011","name":"RealName011","isok":false},{"id":"5b6bd89f7e2e35014194767c","sno":"397397","name":"RealName397","isok":false},{"id":"5b6bd89f7e2e35014194767d","sno":"399399","name":"RealName399","isok":false},{"id":"5b696b937e2e35014194759a","sno":"000000","name":"RealName000","isok":true},{"id":"5b696b937e2e3501419475a0","sno":"006006","name":"RealName006","isok":true},{"id":"5b696b937e2e3501419475a4","sno":"010010","name":"RealName010","isok":true},{"id":"5b696b937e2e35014194759b","sno":"001001","name":"RealName001","isok":true},{"id":"5b696b937e2e35014194759c","sno":"002002","name":"RealName002","isok":true}]},"response":{},"client":{"orgCode":"dlmu","sysCode":"","openId":"5b20b840c10c3c49949b7569","uid":"5b20b840c10c3c49949b7569","ticket":null,"key":"15F2B1E7-D648-4F8C-BB06-E87458E24C91user001","aType":1,"rType":0,"orgType":0,"orgLevel":128,"identityType":1,"dType":4},"method":"signFunction","callback":"jsInterface","H5Context":{}});
                
<!--                window.webkit.messageHandlers.appInterface.postMessage({"type":"signFunction","data":{"recordId":"5b6cf0937e2e3501419476bd","persons":[{"id":"5b696b937e2e35014194759d","sno":"000003","name":"RealName003","isok":true},{"id":"5b696b937e2e35014194759e","sno":"004004","name":"RealName004","isok":true},{"id":"5b696b937e2e35014194759f","sno":"005005","name":"RealName005","isok":false},{"id":"5b696b937e2e3501419475a1","sno":"007007","name":"RealName007","isok":false},{"id":"5b696b937e2e3501419475a2","sno":"008008","name":"RealName008","isok":false},{"id":"5b696b937e2e3501419475a3","sno":"009009","name":"RealName009","isok":false},{"id":"5b696b937e2e3501419475a5","sno":"011011","name":"RealName011","isok":false},{"id":"5b6bd89f7e2e35014194767c","sno":"397397","name":"RealName397","isok":false},{"id":"5b6bd89f7e2e35014194767d","sno":"399399","name":"RealName399","isok":false},{"id":"5b696b937e2e35014194759a","sno":"000000","name":"RealName000","isok":true},{"id":"5b696b937e2e3501419475a0","sno":"006006","name":"RealName006","isok":true},{"id":"5b696b937e2e3501419475a4","sno":"010010","name":"RealName010","isok":true},{"id":"5b696b937e2e35014194759b","sno":"001001","name":"RealName001","isok":true},{"id":"5b696b937e2e35014194759c","sno":"002002","name":"RealName002","isok":true}]},"sign":""});-->

<!--                 window.webkit.messageHandlers.uploadPhotos.postMessage(null);-->

                 
<!--                 window.webkit.messageHandlers.signFunction.postMessage({"recordId":"5b6cf0937e2e3501419476bd","persons":[{"id":"5b696b937e2e35014194759d","sno":"000003","name":"RealName003","isok":true},{"id":"5b696b937e2e35014194759e","sno":"004004","name":"RealName004","isok":true},{"id":"5b696b937e2e35014194759f","sno":"005005","name":"RealName005","isok":false},{"id":"5b696b937e2e3501419475a1","sno":"007007","name":"RealName007","isok":false},{"id":"5b696b937e2e3501419475a2","sno":"008008","name":"RealName008","isok":false},{"id":"5b696b937e2e3501419475a3","sno":"009009","name":"RealName009","isok":false},{"id":"5b696b937e2e3501419475a5","sno":"011011","name":"RealName011","isok":false},{"id":"5b6bd89f7e2e35014194767c","sno":"397397","name":"RealName397","isok":false},{"id":"5b6bd89f7e2e35014194767d","sno":"399399","name":"RealName399","isok":false},{"id":"5b696b937e2e35014194759a","sno":"000000","name":"RealName000","isok":true},{"id":"5b696b937e2e3501419475a0","sno":"006006","name":"RealName006","isok":true},{"id":"5b696b937e2e3501419475a4","sno":"010010","name":"RealName010","isok":true},{"id":"5b696b937e2e35014194759b","sno":"001001","name":"RealName001","isok":true},{"id":"5b696b937e2e35014194759c","sno":"002002","name":"RealName002","isok":true}]});-->


            }
            
            function locationClick() {
<!--                window.webkit.messageHandlers.Location.postMessage(null);-->

 window.webkit.messageHandlers.uploadPhotos.postMessage({"request":4,"response":{},"client":{"orgCode":"dlmu","sysCode":"","openId":"5b20b840c10c3c49949b7569","uid":"5b20b840c10c3c49949b7569","ticket":null,"key":"15F2B1E7-D648-4F8C-BB06-E87458E24C91user001","aType":1,"rType":0,"orgType":0,"orgLevel":128,"identityType":1,"dType":4},"method":"uploadPhotos","callback":"jsInterface","H5Context":{}});

            }
            
            function setLocation(location) {
                asyncAlert(location);
                document.getElementById("returnValue").value = location;
            }
            
            function getQRCode(result) {
                asyncAlert(result);
                document.getElementById("returnValue").value = result;
            }
            
            function colorClick() {
                window.webkit.messageHandlers.Color.postMessage([67,205,128,0.5]);
            }
            
            function payClick() {
                window.webkit.messageHandlers.Pay.postMessage({order_no:'201511120981234',channel:'wx',amount:1,subject:'粉色外套'});
            }
            
            function payResult(str) {
                asyncAlert(str);
                document.getElementById("returnValue").value = str;
            }
            
            function shareResult(channel_id,share_channel,share_url) {
                var content = channel_id+","+share_channel+","+share_url;
                asyncAlert(content);
                document.getElementById("returnValue").value = content;
            }
           
<!--            function jsInterface(channel_id,share_channel,share_url) {-->
<!--                var content = channel_id+","+share_channel+","+share_url;-->
<!--                asyncAlert(content);-->
<!--                document.getElementById("returnValue").value = content;-->
<!--            }-->
<!--            -->
            function jsInterface(natieJson) {
                alert(natieJson);
<!--                var jsData = {"sy":"11","ddd":"22"};-->
<!--                alert(jsData);-->
<!--                alert(jsData.ddd);-->
<!--                var jsNative = JSON;-->
<!--                var jsnnn = natieJson.JSON;-->
<!--                alert(jsNative);-->
<!--                alert(jsNative.retrunData);-->
<!--                alert(jsnnn.retrunData);-->
                
                var imgs = JSON.parse(natieJson).retrunData;
                alert(imgs);
                imgs = natieJson.replace("[", '').replace("]", '').replace("\n", '');
                var a = new Array();
                a = natieJson.split(",");
                alert(a);
                demobar(a);
            }
            
            
            
            function shake() {
                window.webkit.messageHandlers.Shake.postMessage(null);
            }
            
            function goBack() {
                window.webkit.messageHandlers.GoBack.postMessage(null);
            }
            
            function playSound() {
                window.webkit.messageHandlers.PlaySound.postMessage('shake_sound_male.wav');
            }
            
            function asyncAlert(content) {
                setTimeout(function(){
                           alert(content);
                           },1);
            }
            
            
            </script>
            </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input type="button" value="扫一扫" onclick="scanClick()" />
        <input type="button" value="相机相册" onclick="locationClick()" />
        <input type="button" value="修改背景色" onclick="colorClick()" />
        <input type="button" value="刷脸" onclick="shareClick()" />
        <input type="button" value="支付" onclick="payClick()" />
        <input type="button" value="摇一摇" onclick="shake()" />
        <input type="button" value="返回" onclick="goBack()" />
        <input type="button" value="播放声音" onclick="playSound()" />
        
        <h1>这是文件上传</h1>

        <input type="file" />
        
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="40">
        
        </textarea>
        
        <h4>竖直方向的表头：</h4>
        <table border="1" style="width:90%;height:600px">
            <tr>
                <th>姓名</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th>电话</th>
                <td>555 77 854</td>
            </tr>
            <tr>
                <th>传真</th>
                <td>555 77 855</td>
            </tr>
        </table>
        
        
    </body>
</html>
